<template>
  <div class="app-container" style="padding:0px;">

    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px">
        因子列表
        <el-form ref="form" :model="form" label-width="120px">
          <el-checkbox-group v-model="checkList"  >
            <el-checkbox
              v-for="pointParam in pointParamList"
              :key="pointParam.id"
              :label="pointParam.id"
              style="width: 100px;" @change="handleCheckedPointParam(pointParam.id,$event)"
            >{{pointParam.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model="activeName" >
            <el-tab-pane v-for="paramObj in checkListParam" :key="paramObj.id" :label="paramObj.name" :name="paramObj.id+''" >
              <el-radio-group v-model="paramObj.checkId">
                <el-radio class="rs"
                  v-for="paramCode in paramObj.paramCodes"
                  :key="paramCode.id"
                  :label="paramCode.ids" >
                  {{paramCode.agreementInfo.agreementName}}【{{paramCode.agreementRule}}】
                </el-radio>
              </el-radio-group>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px;text-align: right;">
      <el-button type="primary" @click="submitParamForm">确 定</el-button>
    </div>

  </div>
</template>

<script>
  import { listPointParam } from "@/api/basic/paramInfo";
  import { savePointParam } from "@/api/basic/pointParam";

export default {
  props: ["pointId"],
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 监测站点参数数据
      pointParamList: null,
      checkList: [],
      checkListParam: [],
      activeName: null,
      // 表单参数
      form: {},
    };
  },
  watch: {
    pointId(){
      this.getParamList();
    }
  },
  created() {
    this.getParamList();
  },
  methods: {
    handleCheckedPointParam(pointParamId,val){
      if(val){
        this.activeName = pointParamId+"";
      }
      this.checkListParam=[];
      var _this = this;
      this.checkList.forEach(function (item, index) {
        _this.pointParamList.forEach(function (pointParam, index) {
          if(pointParam.id === item){
            _this.checkListParam.push(pointParam);
            if(!val){
              _this.activeName = pointParam.id+"";
            }
          }
        });
      });
    },
    /** 查询测点因子列表 */
    getParamList() {
      this.checkList=[];
      this.checkListParam=[];
      listPointParam({pointId:this.pointId}).then(response => {
        this.pointParamList = response;
        var _this = this;
        this.pointParamList.forEach(function (item, index) {
          if(item.isCheck){
            _this.activeName = item.id+"";
            _this.checkList.push(item.id);
            _this.checkListParam.push(item);
          }
        });
      });
    },
    /** 提交按钮 */
    submitParamForm: function() {
      var check = false;
      var paramIds = [];
      var paramCodeIds = [];
      this.checkListParam.forEach(function (item, index) {
        if(item.checkId == "-1"){
          check = true;
        }
        paramCodeIds.push(item.checkId);
        paramIds.push(item.id);
      });
      if (check){
        this.msgError("有参数未配置编码！");
        return;
      }
      console.log(paramIds.join(","))
      let obj = {
        pointId:this.pointId,
        paramCodeIds:paramCodeIds.join(","),
        paramIds:paramIds.join(",")
      }

      savePointParam(obj).then(response => {
        if (response.code === 200) {
          this.msgSuccess("保存成功！");
        } else {
          this.msgError(response.msg);
        }
      });

    },
  }
};
</script>
<style lang="scss">
  .treescroll {
    overflow-y: auto;
    height: calc(100vh - 158px);
  }
  .hasTagsView {
    .treescroll{
      height: calc(100vh - 192px);
    }
  }
  .rs{ display: block}
  .rs{padding: 6px 0px 6px 0px}
</style>
